/*
 * @Author: yangzonglong
 * @Date: 2021-05-13 09:46:31
 * @version: v1.0.0
 * @Descripttion: 基础设置
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-14 13:26:41
 * @Auditor: 
 */
import React, { useContext, useCallback, useState, useEffect } from 'react';
import { Form, Input, Checkbox } from 'antd';
import { Select } from '@library';
import context from '../context';
import { StartEventSelfProps } from './../../../interface';

const FormItem = Form.Item;
const fieldNames = { label: 'formName', value: 'id' };
const t = window.$app.t;

export default () => {
  const [formName, setFormName] = useState('');
  const [formPageId, setFormPageId] = useState('');
  const [enableFeedbackNotification, setEnableFeedbackNotification] = useState(false); // 设置为true时审批全部结束后会自动给申请人发送通知，反之不发送邮件

  const { self, modeler } = useContext(context);

  const _self = self as StartEventSelfProps;

  useEffect(() => {
    setEnableFeedbackNotification(_self.businessObject?.enableFeedbackNotification || false);
  }, [_self]);

  const onChangeFormName = useCallback((e: React.BaseSyntheticEvent) => {
    modeler.get('modeling').updateLabel(self, e.target.value);
    setFormName(e.target.value);
  }, [self, modeler]);

  const onChangeFormPage = useCallback((e: any) => {
    modeler.get('modeling').updateProperties(self, {
      formPageName: e.label,
      formPageId: e.value
    })
    setFormPageId(e.value);
  }, [self, modeler]);
  
  const onChangeEnableFeedbackNotification = useCallback(e => {
    modeler.get('modeling').updateProperties(self, {
      enableFeedbackNotification: e.target.checked
    })
    setEnableFeedbackNotification(e.target.checked)
  }, [modeler, self]);

  return (
    <Form layout='vertical'>
      <FormItem label={t('workflowName')}>
        <Input onChange={onChangeFormName} value={formName || _self.businessObject?.name}/>
      </FormItem>
      <FormItem label={t('withWorkflowPageLabel')}>
        <Select
          onChange={onChangeFormPage}
          value={formPageId || _self.businessObject?.formPageId}
          fieldNames={fieldNames} 
          url='/bk/api/fd/Form/find'/>
      </FormItem>
      <FormItem label={t('enableFeedbackNotification')}>
        <Checkbox 
          checked={enableFeedbackNotification} 
          onChange={onChangeEnableFeedbackNotification}/>
      </FormItem>
    </Form>
  )
}
